<template>
	<view class="tabBar">
		<view v-for="(item) in tabBar" :key="item.url" class="tabbar_item" :class="{'active':item.url == currentPage}"
			@click="navTo(item)">
			<image v-if="item.url == currentPage" :src="item.imgClick" mode="aspectFit"></image>
			<image v-else :src="item.imgNormal" mode="aspectFit"></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: String,
				default: '/app/Recruit/pages/index/index'
			}
		},
		data() {
			return {
				tabBar: [{
						url: '/app/Recruit/pages/index/index',
						text: '校招',
						imgNormal: '../../static/taber/basics.png',
						imgClick: '../../static/taber/basics_cur.png'
					},
					{
						url: '/app/Recruit/pages/resume/index',
						text: '简历',
						imgNormal: '../../static/taber/basics.png',
						imgClick: '../../static/taber/basics_cur.png'
					},
					{
						url: '/app/Recruit/pages/index/info',
						text: '我的',
						imgNormal: '../../static/taber/basics.png',
						imgClick: '../../static/taber/basics_cur.png'
					}
				]
			};
		},
		created() {
			uni.hideTabBar({});
		},
		methods: {
			navTo(item) {
				var isUrl = `${item.url}`
				const that = this;
				uni.navigateTo({
					animationType:"fade-in",
					url:isUrl,
					
				})
				// uni.switchTab({
				// 	url: isUrl
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	//导航栏设置
	$isBg:#ffffff; //背景
	// 选中设置
	$chooseTextColor:#000000; //选中时字体颜色
	$chooseBgColor:white; //选中时背景颜色 transparent为透明

	//未选中设置
	$normalTextColor:#000; //未选中颜色

	.tabBar {
		width: 100%;
		height: 100rpx;
		position: fixed;
		padding-top: 10rpx;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 998;
		background-color: $isBg;
		color: $normalTextColor;
		border-top: 1rpx solid #CCCCCC;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		overflow: hidden;

		.tabbar_item {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;

			&.active {
				background: $chooseBgColor;
				color: $chooseTextColor;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		image {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
		}

	}
</style>
